<template>
  <div>
    <a-button @click="clean">clean</a-button>
    <div
      style="width: 800px; height: 600px; border: 1px solid #cccccc"
      ref="container"
    ></div>
    <img :src="imgurl" alt="" />
  </div>
</template>

<script>
import {HandWriteBoard} from "./WriteBoard.js";
export default {
  data() {
    return {
      board: null,
      imgurl: "",
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.board = HandWriteBoard(this.$refs.container);
    });
  },
  methods: {
    clean() {
      this.board.clean();
      this.imgurl = "";
    },
    save() {
      var data = this.board.save();
      this.imgurl = data;
    },
  },
};
</script>

<style></style>
